<!--
 * @Author       : Hejh(3010733382@qq.com)
 * @Version      : V1.0
 * @Date         : 2024-02-20 20:33:19
 * @Description  : 日志通用的时间选择器
-->

<template>
  <div class="flex">
    <n-radio-group
      v-model:value="timeType"
      name="radiobuttongroup2"
      size="small"
    >
      <n-radio-button :value="0" label="今天" />
      <n-radio-button :value="1" label="近7天" />
      <n-radio-button :value="2" label="近30天" />
      <n-radio-button :value="3" label="自定义" />
    </n-radio-group>
    <n-date-picker
      v-if="timeType === 3"
      v-model:value="timeRange"
      type="datetimerange"
      clearable
      size="small"
      class="ml-2"
    />
  </div>
</template>

<script setup lang="ts">
import dayjs from 'dayjs'
import { getStartAndEndTime } from '@/utils'
import type { IndexObj } from '@/types/commom'

const timeType = ref(0)
const emits = defineEmits<{
  (e: 'timeChange', value: IndexObj): void
}>()
watch(timeType, (newValue) => {
  if ([0, 1, 2].includes(newValue)) {
    emits('timeChange', {
      startTime: getStartAndEndTime(timeType.value).startTime!.format(
        'YYYY-MM-DD HH:mm:ss'
      ),
      endTime: getStartAndEndTime(timeType.value).endTime.format(
        'YYYY-MM-DD HH:mm:ss'
      )
    })
  }
})

const timeRange = ref<[number, number]>([1183135260000, Date.now()])
watch(timeRange, (newValue) => {
  emits('timeChange', {
    startTime: dayjs(newValue[0]).format('YYYY-MM-DD HH:mm:ss'),
    endTime: dayjs(newValue[1]).format('YYYY-MM-DD HH:mm:ss')
  })
})
</script>

<style scoped></style>
